<template>
  <div id="translateBoxPage">
    <div class="key">
      <div>key: {{ currentTranslate.getItemKey() }}</div>
    </div>
    <div class="rawText">
      <p>
        {{ currentTranslate.getRawText() }}
      </p>
    </div>
    <div class="inputBox">
      <textarea
        style="width:100%;height:100%;"
        v-model="translateText"
      ></textarea>
    </div>
    <teSplit />
    <div class="advise">
      <div class="translate baidu">
        <p>百度翻译:</p>
        <P>{{ baidu }}</P>
      </div>
      <div class="translate google">
        <p>谷歌翻译:</p>
        <!-- <p>{?}</p> -->
        <p>{{ google }}</p>
      </div>
      <div class="translate youdao">
        <p>有道翻译:</p>
        <p>{?}</p>
      </div>
    </div>
    <teSplit />
    <div class="library"></div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
  import teSplit from '../../../../components/TeUi/TeSplit.vue';
  import baidu from '../../../../script/translate/baidu';
  import google from '../../../../script/translate/google';
  import language from '../../../../script/file/language';
  import translateItem from '../../../../script/file/translateItem';
  @Component({
    name: 'translateBoxPage',
    components: {
      teSplit
    }
  })
  export default class translateBoxPage extends Vue {
    @Prop()
    currentTranslate!: translateItem;
    translateText: string = '';
    //translate API
    baidu = '';
    google = '';
    @Watch('currentTranslate', { immediate: true, deep: true })
    onChangeValue(newVal: string, oldString: string) {
      this.baidu = '加载中';
      this.google = '加载中';
      baidu
        .trans(new language(0, 3), this.currentTranslate.getRawText())
        .then(v => {
          this.baidu = v;
        });
      google
        .trans(new language(0, 3), this.currentTranslate.getRawText())
        .then(v => {
          this.google = v;
        });
    }
  }
</script>

<style scoped>
  p {
    margin: 0;
    padding: 0;
  }
  #translateBoxPage {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .rawText {
    overflow-y: auto;
    word-break: break-all;
    margin: 1% 0 1% 0;
    width: 80%;
    height: auto;
    min-height: 35px;
    max-height: 30%;
    display: flex;
    flex-direction: column;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 1px;
    border: 1px solid red;
    padding: 1%;
    font-family: wuming123;
  }
  .inputBox {
    word-break: break-all;
    margin: 1% 0 1% 0;
    width: 80%;
    height: auto;
    min-height: 64px;
    border: 1px solid black;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 1.2px;
    padding: 1%;
    font-family: wuming123;
  }
  .advise {
    width: 80%;
  }
  .advise .translate {
    display: flex;
    flex-direction: row;
  }
</style>
